<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';

const chartDom = ref(null);
const chartInstance = ref(null);
const data = ref({
  code: '',
  msg: '',
  data: []
});

// 请求数据并绘制图表
const fetchData = async () => {
  try {
    // 发起 API 请求，获取数据
    const response = await axios.get('/api/queryAllChargingPoints');

    // 确保 API 返回的数据格式正确
    if (response.data && response.data.data) {
      data.value = response.data;

      // 提取数据
      const years = [];
      const fastData = [];
      const slowData = [];

      // 使用对象存储每年数据，便于后续填充
      const yearMap = {};

      // 遍历返回的数据，提取年份和对应的 totalvalue
      data.value.data.forEach(item => {
        const { year, powertrain, totalvalue } = item;

        // 如果该年没有记录，则初始化
        if (!yearMap[year]) {
          yearMap[year] = { fast: null, slow: null };
        }

        // 分配数据到不同类型
        if (powertrain === 'Publicly available fast') {
          yearMap[year].fast = totalvalue;
        } else if (powertrain === 'Publicly available slow') {
          yearMap[year].slow = totalvalue;
        }
      });

      // 将数据按年份排序并填充到相应的数组
      Object.keys(yearMap).sort().forEach(year => {
        years.push(year);
        fastData.push(yearMap[year].fast || 0); // 如果没有数据，默认为 0
        slowData.push(yearMap[year].slow || 0); // 如果没有数据，默认为 0
      });

      // 配置 ECharts 图表
      const option = {
        title: {
          text: '充电方式',
          left:'center',
          top:10,
          textStyle: {
            color: '#FFFFFF',
            fontFamily:'YouYuan' // 标题文字颜色
          }
        },
        legend: {
          data: ['Fast', 'Slow'],
          top:40,
          textStyle: {
            color: ['#d59bf6', '#9896f1'] // 图例文字颜色
          }
        },
        grid: {
            top: '25%',
            left: '13%',
            right: '5%',
            bottom: '10%',
        },
        toolbox: {}, // 移除查看数据和保存图片功能
        tooltip: {},
        xAxis: {
          type: 'category', // 设置为类目轴
          data: years,
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#ffffff', 
          },
        },
        yAxis: {
          axisLabel: {
            color: '#ffffff',
          },
        },
        series: [
          {
            name: 'Fast',
            type: 'bar',
            stack: 'Total', // 启用堆叠效果
            data: fastData,
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 10;
            },
            itemStyle: {
              color: '#d59bf6' // 设置 Fast 的柱状图颜色
            }
          },
          {
            name: 'Slow',
            type: 'bar',
            stack: 'Total', // 启用堆叠效果
            data: slowData,
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 10 + 100;
            },
            itemStyle: {
              color: '#9896f1' // 设置 Slow 的柱状图颜色
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5;
        }
      };

      // 使用 ECharts 绘制图表
      if (chartInstance.value) {
        chartInstance.value.setOption(option);
      }
    } else {
      console.error('API 返回数据格式错误:', response.data);
    }
  } catch (error) {
    console.error('请求数据失败:', error);
  }
};

// 在组件挂载时加载数据
onMounted(() => {
  if (chartDom.value) {
    chartInstance.value = echarts.init(chartDom.value);
  }
  fetchData();
});
</script>

<template>
  <div>
    <!-- 图表容器 -->
    <div ref="chartDom" style="width: 100%; height: 300px;"></div>
  </div>
</template>

<style scoped>
/* 样式自定义 */
</style>